<template>
	<view>
		<u-popup :show="show" bgColor="transparent" :round="20" @close="close" @open="open" mode="center">
			<view class="bg">
				<view style="text-align: center;font-weight: bold;font-size: 40rpx;">V{{saveAppVersion}}更新内容</view>
				<view style="margin-top: 20rpx;">
					<rich-text :nodes="saveAppVersionData.appHistory"></rich-text>
				</view>
				<u-button @click="click" color="linear-gradient(to right, red, rgb(255,105,105))" class="custom-style"
					:text="contrastVersion?'我知道了':'立即更新'">
				</u-button>
				<view @click="close" style="position: absolute; right: 40rpx;top: 40rpx;">
					<u-icon name="close" color="#333" size="40"></u-icon>
				</view>
			</view>
		</u-popup>
		<u-modal :showCancelButton="true" @cancel="cancel" @confirm="confirm" :show="downloadModal" :title="title">
			<block>
				<u-line-progress :percentage="temp" height="28" activeColor="#ff0000">

				</u-line-progress>
			</block>
		</u-modal>
	</view>

</template>

<script>
	var app = getApp();
	const versionInfo = app.globalData.versionInfo;
	export default {
		data() {
			return {
				//控制版本弹窗
				show: false,
				title: "下载中",
				//版本数据
				saveAppVersion: versionInfo.appVersion || "",
				appVersion: app.globalData.localVersion.version || "",
				saveAppVersionData: versionInfo,
				//下载路径
				path: "",
				//下载进度
				temp: 0,
				//控制下载弹窗
				downloadModal: false,
				//中断下载
				isCancel: false,
				
			}
		},
		computed: {
			contrastVersion() {
				let version = this.saveAppVersion
				let myVersion = this.appVersion;
				// console.log(version + ',' + myVersion);
				myVersion = myVersion.replace(/\./g, '')
				version = version.replace(/\./g, '')
				return myVersion == version;
			}
		},
		mounted() {
			// console.log(123);
			// console.log(plus.runtime.version)
		},
		methods: {
			confirm() {
				plus.runtime.install(
					plus.io.convertLocalFileSystemURL(this.path), {
						force: true
					},
					() => {
						uni.showToast({
							icon: 'none',
							title: '安装成功！'
						});
						this.downloadModal = false
					}, (e) => {
						uni.showToast({
							icon: 'none',
							title: '安装失败！'
						});
						this.downloadModal = false
					})
			},
			cancel() {
				this.downloadModal = false
				this.isCancel = true

			},
			async click() {
				let that = this
				if (!this.contrastVersion) {
					that.show = false
					that.downloadModal = true
					let url = this.saveAppVersionData.android
					const downloadTask = uni.downloadFile({
						url, 
						success: (res) => {
							if (res.statusCode === 200) {
								that.path = res.tempFilePath
								console.log('下载成功 ', res);
							}
						}
					});
					downloadTask.onProgressUpdate((res) => {
						that.temp = res.progress
						if (res.progress == 100) {
							that.title = "下载完成!"
						}
						console.log('下载进度' + res.progress);
						console.log('已经下载的数据长度' + res.totalBytesWritten);
						console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
						if (that.isCancel) {
							downloadTask.abort();
							that.isCancel = false
						}
						// 满足测试条件，取消下载任务。
						if (res.progress > 50) {}
					});

				}
				this.show = false
			},
			open() {
				this.show = true;
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			}
		}
	}
</script>

<style lang="scss">
	.bg {
		width: 600rpx;
		// height: 400rpx;
		background: linear-gradient(to bottom, rgb(255, 201, 201) 0, #fff 90%);
		border-radius: 30rpx;
		box-sizing: border-box;
		padding: 60rpx 40rpx 50rpx;
		position: relative;
		// background: i;
	}

	.custom-style {
		margin-top: 80rpx;

	}
</style>
